<template>
    <div id="tmpl">
        <mt-swipe :auto="2000">
            <mt-swipe-item v-for="item in lunbo">
                <img :src="item.img" >
            </mt-swipe-item>

        </mt-swipe>
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
                    <span class="mui-icon mui-icon-email"></span>
                    <div class="mui-media-body">图片分享</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品购买</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">视频专区</div></router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div></router-link>
                </li>

            </ul>
        </div>

    </div>
</template>

<script>
    export default{
        data(){
            return {
                lunbo:[
                    {'img':'../../statics/imgs/wow1.jpg'},
                    {'img':'../../statics/imgs/wow2.jpg'},
                    {'img':'../../statics/imgs/wow3.jpg'},
                ]


            }
        },
    }
  </script>

<style scoped>
    .mint-swipe{
        width:100%;
       height: 300px;
        background: pink;
    }
    .mint-swipe img{
        width:100%
    }
    .mui-grid-view.mui-grid-9{
        background-color: white;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:0
    }
    .mui-grid-view.mui-grid-9{
        border:0
    }
    .mui-icon-home:before{
     content:'';
        background-image: url(../../statics/imgs/jiugongge/i1.png);
        width: 50px;
        height: 50px;
      background-repeat: round;
        display:inline-block;
    }
    .mui-icon-search:before{
        content:'';
        background-image: url(../../statics/imgs/jiugongge/i2.png);
        width: 50px;
        height: 50px;
        background-repeat: round;
        display:inline-block;
    }
    .mui-icon-phone:before{
        content:'';
        background-image: url(../../statics/imgs/jiugongge/i3.png);
        width: 50px;
        height: 50px;
        background-repeat: round;
        display:inline-block;
    }
    .mui-icon-email:before{
        content:'';
        background-image: url(../../statics/imgs/jiugongge/i4.png);
        width: 50px;
        height: 50px;
        background-repeat: round;
        display:inline-block;
    }
    .mui-icon-chatbubble:before{
        content:'';
        background-image: url(../../statics/imgs/jiugongge/i1.png);
        width: 50px;
        height: 50px;
        background-repeat: round;
        display:inline-block;
    }
    .mui-icon-location:before{
        content:'';
        background-image: url(../../statics/imgs/jiugongge/i2.png);
        width: 50px;
        height: 50px;
        background-repeat: round;
        display:inline-block;
    }
</style>